<template>
	<div id="container">
		<header>
			<van-nav-bar
			  title="修改登录密码"
			  left-text="返回"
			  left-arrow
			  @click-left="onClickLeft"
			/>
		</header>
		<div id="content">
			<!-- 输入框 -->
			<input v-model="oldpwds" type="password" class="old-pwd" placeholder="请输入当前密码">		
			<input v-model="newpwds" type="password" class="new-pwd" placeholder="请输入新密码">
			<input v-model="repwds" type="password" class="re-pwd" placeholder="请确认新密码">
			
			<!-- 按钮 -->
			<van-button type="danger" class="uppwd-confirm" @click="confirm()">确认</van-button>
		</div>
	</div>
</template>

<script>
	
import * as api from '../../api/postuppwd'
import {Dialog} from 'vant'
export default{
	name:'Uppwd',
	data(){
		return{
			oldpwds:'',
			newpwds:'',
			repwds:''
		}
	},
	methods:{
		onClickLeft(){
			this.$router.go(-1)
		},
		confirm(){
			if(this.newpwds==this.repwds){
				let token=this.$store.state.tokens
				let uid=this.$store.state.uids
				api.postUppwd({uid:uid,password:this.repwds},{headers:{token:token}}).then((data)=>{
					let uid=''
					let token=''
					let username ="登录/注册"
					this.$store.commit('login',{username,uid,token})					
					Dialog({message:'密码修改成功'}).then(()=>{
						this.$router.push('/login')
					})
				})
			}else{
				Dialog({message:'确认密码输入错误'})
			}
			
		}
	}
}
</script>

<style scoped>
#container{
	height: 100vh;
	background: #f3f3f3;
}
/* ---------------------header------------- */
header .van-nav-bar{
	height:47px;
	border:1px solid #f3f3f3;
}
header .van-nav-bar__title{
	font-size:20px;
	font-weight:600;
	font-family:"楷体";
}
header .van-nav-bar__text{
	font-size:18px;
	color: #000000;
	font-weight:600;
	font-family: "楷体";
}
header .van-icon-arrow-left{
	font-size: 18px;
	color: #000000;
}
/* --------------------content-uppwd------------------- */
#content{
	text-align: center;
}
#content input{
	border: 0;
	color: #000;
	font-size: 22px;
	font-family: "楷体";
	width: 340px;
	height: 66px;
	border-bottom: 2px solid #e7e7e7;
	background:#f3f3f3;
}
#content .van-button{
	border:0;
	border-radius: 4px;
	margin-top: 42px;
	width:342px;
	height:51px;
	font-size:25px;
	font-family: "楷体";
	color:#fff;
	background:#f8a89d;
}
</style>
